<template>
  <div class="app">
    <Row>
      <!--左侧导航栏开始-->
      <!--  <Col :span="spanLeft">
          <component is="MenuLeft" :spanLeft="spanLeft" :spanRight="spanRight" :theme="theme" @changetheme="getTheme"></component>
        </Col>-->
      <!--左侧导航栏结束-->
      <Col span="24">
      <div class="layout-header">
        <component is="Navigation" @toggleClick="toggleClick" :theme="theme"></component>
      </div>
      <!--<div class="layout-breadcrumb">
        <Breadcrumb>
          <Breadcrumb-item href="#">首页</Breadcrumb-item>
          <Breadcrumb-item href="#">应用中心</Breadcrumb-item>
          <Breadcrumb-item>某应用</Breadcrumb-item>
        </Breadcrumb>
      </div>-->

      <div class="layout-content">
        <!--<div class="layout-content-main">内容区域</div>-->
        <router-view></router-view>
      </div>

      </Col>
    </Row>
    <Row>
      <Col span="24">
      <div class="layout-copy">
        <component is="BottomFooter"></component>
      </div>
      </Col>
    </Row>
    <Back-top></Back-top>
  </div>
</template>

<script>
  import Navigation from './components/Header' // 顶部导航
  import Menu from './components/Menu' // 左侧菜单
  import Footer from './components/footer' // 左侧菜单
  import Login from './components/login' // 左侧菜单
  import Home from './components/Home' // 首页

  export default {
    name: 'app',
    components: {
      Navigation,
      MenuLeft: Menu,
      BottomFooter: Footer,
      Login,
      Home
    },
    data () {
      return {
        routerPath: '/login',
        theme: 'dark',
        spanLeft: 5,
        spanRight: 19
      }
    },
    methods: {
      toggleClick () {
        if (this.spanLeft === 5) {
          this.spanLeft = 2
          this.spanRight = 22
        } else {
          this.spanLeft = 5
          this.spanRight = 19
        }
      },
      getTheme (themeName) {
        this.theme = themeName
      }
    }
  }
</script>

<style type="text/css" lang="stylus">
  html, body {
    background: #f6f6f6
    height: 100%
    width: 100%
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .app {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-content {
    min-height: 200px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
  }

  .layout-content-main {
    padding: 10px;
  }

  .layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .layout-ceiling-main a {
    color: #9ba7b5;
  }

  .ivu-col {
    transition: width .2s ease-in-out;
  }

</style>
